<template>
    <div v-show="showDialog">
        <!--    添加框    -->
        <el-dialog title="书籍添加"  :visible.sync="showDialog" @close="handleClose" ref="BookRef"  >
            <el-form :model="form" :rules="rules">
                <el-form-item label="书籍编号" :label-width="formLabelWidth" prop="bid">
                    <el-input v-model="form.bid" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bname">
                    <el-input v-model="form.bname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth" prop="author">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth" prop="num">
                    <el-input v-model.number="form.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图书室名称" :label-width="formLabelWidth" >
                            <!--   v-model是定义默认值的    -->
                    <el-select v-model="form.value1" clearable placeholder="请选择">
                        <el-option
                                v-for="item in form.options"
                                :key="item.rid"
                                :label="item.name"
                                :value="item.rid">
                            <span style="float: left">{{ item.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.adress }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="图书类型" :label-width="formLabelWidth">
                    <el-select v-model="form.value2" clearable placeholder="请选择">
                        <el-option
                                v-for="item in form.datas"
                                :key="item.tid"
                                :label="item.btype"
                                :value="item.tid">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        inject:['reload'],
        //子组件接受父组件传递的内容
        props: {
            addOrUpdateVisible: {
                type: Boolean,
                default: false
            },
        },
        data(){
            return {
                form: {
                    bid:'',
                    bname:'',
                    author:'',
                    options: [],
                    datas:[],
                    value1: '',
                    value2: '',
                    num:''
                },
                showDialog: false,
                formLabelWidth: '100px',
                rules: {
                    bid: [
                        { required: true, message: '图书编号不能为空'},
                    ],
                    bname: [
                        { required: true, message: '图书名称不能为空'},
                    ],
                    author: [
                        { required: true, message: '作者不能为空'},
                    ],
                    num: [
                        { required: true, message: '数量不能为空'},
                        { type: 'number', message: '数量必须为数字值'}
                    ],
                }
            }
        },
        methods: {
            // 弹出框关闭后触发
            handleClose () {
                this.form.bid='';
                this.form.bname='';
                this.form.author='';
                this.form.num='';
                this.form.value1 = null;
                this.form.value2=null;
                // 子组件调用父组件方法，并传递参数
                this.$emit('changeShow', 'false')
            },
            //获取所有图书书室名称
            async  getList(){
                const{data:res}=await this.$http.post("library/getRoomName");
                this.form.options=res.data.list;
            },
            //获取所有图书书室名称
            async  getType(){
                const{data:res}=await this.$http.post("/booktype/getType");
                this.form.datas=res.data.list;
            },
            async add(){
                const{data:res}=await this.$http.post("book/add",
                    {
                        author:this.form.author,
                        bid:this.form.bid,
                        bname:this.form.bname,
                        value1:this.form.value1,
                        value2:this.form.value2,
                        num:this.form.num,
                    });
                if(res.code==20000){
                    this.reload();
                    this.$message.success("添加成功");
                    this.showDialog = false;
                }
                else{
                    this.showDialog = true;
                    this.form.bid='';
                    this.form.bname='';
                    this.form.author='';
                    this.form.num='';
                    this.form.value1 = null;
                    this.form.value2=null;
                    this.$message.error("你要添加的图书编号"+this.form.bid+"已存在！请重新添加");
                }


            }
        },
        watch: {
            // 监听 addOrUpdateVisible 改变
            addOrUpdateVisible () {
                this.showDialog = this.addOrUpdateVisible
            }
        }

    }
</script>

<style scoped>

</style>
